<template>
  <view class="video_list">
    <view v-for="(item, index) in VideoList_data" :key="index">
      <view class="top">
        <video
          :src="item.video_url"
          object-fit="cover"
          :show-center-play-btn="true"
          :id="item._id"
          @play="playVideo(item._id)"
        ></video>
        <text>{{ item.video_title }}</text>
        <!-- 播放图标 -->
        <!-- <image src="/static/other/video-bofang.png" mode="" /> -->
      </view>
      <view class="bottom">
        <image :src="item.avatar" mode="" class="doctorAvater" />
        <text>{{ item.name }}</text>
      </view>
    </view>
  </view>
  <!-- 加载图标 -->
  <view class="Loading" v-if="loading">
    <image src="/static/other/loading.svg" mode="widthFix"></image>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import apiRequest from "~/api/index.js";
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";

const VideoList_data = ref([]);
const page = ref(1);

onMounted(async () => {
  request_data();
});
// 获取相应分页视频数据
const request_data = async () => {
  console.log(page.value);
  const res = await apiRequest.VideoList(page.value);
  if (page.value == 1) {
    VideoList_data.value = res.data;
  }
  return res.data;
};

let loading = ref(false);
const touchDown = async () => {
  loading.value = true;
  // 获取下一页数据
  page.value++;
  const new_VideoList_data = await request_data();
  loading.value = false;
  VideoList_data.value.push(...new_VideoList_data);
};


// 上一个视频的id
let video_id_last = ref(-1);
function playVideo(video_id) {
  if (video_id_last.value == -1) {
    // 第一次播放
    video_id_last.value = video_id;
  } else {
    let video_obj = uni.createVideoContext(video_id_last.value);
    if (video_id_last.value != video_id) {
      // 暂停上一个
      video_obj.pause();
      // 播放当前的视频
      setTimeout(() => {
        video_id_last.value = video_id;
      }, 500);
    }
  }
}
// 页面滚动到底部的事件
onReachBottom(() => {
  touchDown();
});
// 下拉
onPullDownRefresh(async () => {
  touchDown();
});
// console.log(loading.value);
</script>

<style scoped>
.video_list > view {
  @apply bg-light-50;
  margin-bottom: 20rpx;
}
.video_list .top {
  position: relative;
}
.video_list .top video {
  height: 400rpx;
  width: 100%;
}
.video_list .top text {
  @apply absolute text-light-50 font-bold;
  font-size: 35rpx;
  top: 20rpx;
  left: 20rpx;
}
.video_list .bottom {
  @apply flex;
  align-self: center;
  padding: 15rpx;
}
.video_list .bottom .doctorAvater {
  height: 40rpx;
  width: 40rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.Loading {
  height: 150rpx;
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
}
.Loading image {
  width: 70rpx;
  height: 70rpx;
  animation: rotate 1s infinite linear;
}
/* 旋转动画 */
@keyframes rotate {
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(359deg);
  }
}
</style>
